<template>
  <a-card title="项目管理" :bordered="false">
    <template #extra>
      <a-button type="primary" @click="operate('add', {})">
        <plus-outlined />
        新增
      </a-button>
    </template>
    <a-form ref="formStateRef" :model="formState.projectNo" layout="inline">
      <a-form-item
        name="describe"
        label="项目编号"
        :colon="false"
        style="margin: 10px; margin-left: 0px"
      >
        <a-input
          allow-clear
          style="width: 220px"
          placeholder="请输入"
          v-model:value="formState.projectNo"
        />
      </a-form-item>
      <a-form-item
        name="projectName"
        label="项目名称"
        :colon="false"
        style="margin: 10px"
      >
        <a-input
          allow-clear
          style="width: 220px"
          placeholder="请输入"
          v-model:value="formState.projectName"
        />
      </a-form-item>
      <a-form-item style="margin: 10px 10px 10px 0px">
        <a-button type="primary" ghost html-type="submit" @click="query">
          查询
        </a-button>
        <a-button @click="reset" style="margin-left: 10px"> 重置 </a-button>
      </a-form-item>
    </a-form>
    <a-table
      :columns="columns"
      :data-source="data.tableList"
      :pagination="false"
      bordered
      :loading="data.loading"
      style="margin: 15px 0px"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="link" @click="operate('edit', record)">编辑</a-button>
          <a-popconfirm
            title="确认删除吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteData(record.id)"
          >
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:pageSize="pageSize"
      v-model:current="pageNum"
      show-size-changer
      show-quick-jumper
      @change="onChange"
      :total="data.total"
      :show-total="() => `共 ${data.total}条`"
    />
  </a-card>
  <!-- 新增、编辑、查看 -->
  <view-dialog ref="formEdit" :row="row" :title="title" @onSumbit="onSumbit" />
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import type { UnwrapRef } from "vue";
import viewDialog from "./child/view.vue";
import { getList, deleteItem } from "../../api/project";
import { message } from "ant-design-vue";
let pageNum = ref<number>(1);
let pageSize = ref<number>(10);
let row = ref<any>({});
let title = ref<string>("");
const formStateRef = ref<any>();
let formEdit = ref<any>(null);
interface FormState {
  projectNo: string | undefined;
  projectName: string | undefined;
}
const formState: UnwrapRef<FormState> = reactive({
  projectNo: "",
  projectName: "",
});
const data = reactive<any>({
  tableList: [],
  loading: false,
  total: 0,
});
const columns = reactive<any>([
  {
    title: "序号",
    scopedSlots: "num",
    width: 70,
    customRender: ({ text, index }: any) =>
      `${(pageNum.value - 1) * pageSize.value + (index + 1)}`,
  },
  {
    title: "项目编号",
    dataIndex: "projectNo",
    key: "projectNo",
    ellipsis: true,
  },
  {
    title: "项目名称",
    dataIndex: "projectName",
    key: "projectName",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);
const operate = (str: string, record: any) => {
  title.value = str;
  row.value = record;
  formEdit.value.openModel();
};
const reset = () => {
  formState.projectName = "";
  formState.projectNo = "";
  pageNum.value = 1;
  getTable();
};
const getTable = () => {
  data.loading = true;
  let query = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    projectName: formState.projectName,
    projectNo: formState.projectNo,
  };
  getList(query).then((res: any) => {
    if (res.code == 2001) {
      data.tableList = res.data.records;
      data.total = res.data.total;
      data.loading = false;
    } else {
      data.loading = false;
      message.error(res.msg);
    }
  });
};
const deleteData = (id: number) => {
  deleteItem({ id }).then((res: any) => {
    if (res.code == 2001) {
      message.success("删除成功");
    } else {
      message.error(res.msg);
    }
    pageNum.value = 1;
    getTable();
  });
};
const query = () => {
  pageNum.value = 1;
  getTable();
};
const onSumbit = () => {
  pageNum.value = 1;
  getTable();
};
const onChange = (num: number) => {
  pageNum.value = num;
  getTable();
};
onMounted(() => {
  getTable();
});
</script>

<style scoped lang="less">
.searchIcon {
  width: 20px;
  height: 20px;
  margin-top: -4px;
}
:deep(.ant-form-item-control-input-content) {
  height: 40px;
}

:deep(.ant-input-affix-wrapper) {
  height: 40px;
  padding: 0px 8px;

  input {
    height: 30px;
  }
}
.ant-btn {
  border-radius: 8px;
  height: 40px;
}
:deep(.ant-table-cell-ellipsis .ant-table-column-title) {
  overflow: initial;
}
</style>
